<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>用户管理</title>
		<script src="../static/babel/6.26.0/polyfill.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/axios/0.17.1/axios.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/vue/2.5.13/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/element-ui/2.1.0/index.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../static/element-ui/2.1.0/index.css" />
		<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/hou-tai.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/hou-tai.css" />
	</head>

	<body>
		<div id="app">
			<hou-tai>
				<div style="width: 90%; margin: auto;">
					<el-row type="flex" justify="space-between" align="middle">
						<el-col :span="3">
							<!--<el-input size="small" v-model="searchUser.username" clearable placeholder="请输入用户名" @change=""></el-input>-->
						</el-col>
						<el-col :span="6" align="right">
							<!--<el-button size="mini" type="primary" icon="el-icon-search" @click="search(1)">查询</el-button>-->
							<el-button size="mini" type="success" icon="el-icon-plus" @click="dialogAddVisible = true">新增</el-button>
						</el-col>
					</el-row>
					<el-table :data="users" stripe border style="margin-top: 10px;">
						<el-table-column label="序号" type="index" :index="page.index" width="60">
						</el-table-column>
						<el-table-column label="用户名">
							<template slot-scope="scope">
								{{scope.row.username}}
							</template>
						</el-table-column>
						<el-table-column label="昵称">
							<template slot-scope="scope">
								{{scope.row.nickname}}
							</template>
						</el-table-column>
						<el-table-column label="创建时间">
							<template slot-scope="scope">
								{{scope.row.createTime | date('yyyy-MM-dd')}}
							</template>
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button size="mini" type="primary" icon="el-icon-edit" @click="editRole(scope.row)">角色</el-button>
								<el-button size="mini" icon="el-icon-edit" @click="edit(scope.row)">编辑</el-button>
								<el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteUser(scope.row)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination @current-change="search" :total='page.total' :page-size='page.pageSize' :current-page.sync="page.currentPage">
					</el-pagination>
					<el-dialog title="编辑用户" :visible.sync="dialogEditVisible" width="400px">
						<el-form :rules="editRules" :model="editUser" ref="editUser" label-width="80px" @keyup.enter.native="submitEditForm('editUser')">
							<el-form-item label="用户名" prop="username">
								<el-input v-model="editUser.username" placeholder="请输入用户名" :disabled="true"></el-input>
							</el-form-item>
							<el-form-item label="昵称" prop="nickname">
								<el-input v-model="editUser.nickname" placeholder="请输入昵称"></el-input>
							</el-form-item>
							<el-form-item label="手机号" prop="mobile">
								<el-input v-model="editUser.mobile" placeholder="请输入手机号"></el-input>
							</el-form-item>
							<el-form-item label="邮箱" prop="email">
								<el-input v-model="editUser.email" placeholder="请输入邮箱"></el-input>
							</el-form-item>
							<el-form-item>
								<el-button @click="resetForm('editUser')">重置</el-button>
								<el-button type="primary" @click="submitEditForm('editUser')">确认</el-button>
								<el-button type="danger" @click="resetPassword(editUser)">重置密码</el-button>
							</el-form-item>
						</el-form>
					</el-dialog>
					<el-dialog title="新增用户" :visible.sync="dialogAddVisible" width="400px">
						<el-form :rules="addRules" :model="addUser" ref="addUser" label-width="80px" @keyup.enter.native="submitAddForm('addUser')">
							<el-form-item label="用户名" prop="username">
								<el-input v-model="addUser.username" placeholder="请输入用户名"></el-input>
							</el-form-item>
							<el-form-item label="昵称" prop="nickname">
								<el-input v-model="addUser.nickname" placeholder="请输入昵称"></el-input>
							</el-form-item>
							<el-form-item>
								<el-button @click="resetForm('addUser')">重置</el-button>
								<el-button type="primary" @click="submitAddForm('addUser')">新增</el-button>
							</el-form-item>
						</el-form>
					</el-dialog>
					<el-dialog title="编辑用户角色" :visible.sync="dialogRoleVisible" width="600px">
						<el-transfer v-model="hasRole" :data="roleData" :titles="['未拥有角色', '已拥有角色']"></el-transfer>
						<br />
						<el-button type="primary" @click="saveRole()">确定</el-button>
					</el-dialog>
				</div>
			</hou-tai>
		</div>
		<script src="js/user.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/user.css" />
	</body>

</html>